<template>
    <div>
        <img class="topimg" src="https://file.xdclass.net/video/%E5%AE%98%E7%BD%91%E8%BD%AE%E6%92%AD%E5%9B%BE/vip.jpeg" alt="">
        <cube-form
            :model="model"
            :schema="schema"
            @submit="submitHandler">
        </cube-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                model:{
                    username:'',
                    passwored:''
                },
                schema:{
                    fields:[
                        //用户名配置
                        {
                            type:'input',
                            modelKey:'username',
                            label:'用户名',
                            props:{
                                placeholder:'请输入用户名',
                            },
                            rules:{
                                required:true,
                                type:'string',
                                min:3,
                                max:15
                            },
                            trigger:'blur',
                            messages:{
                                required:'用户名不能为空',
                                min:'用户名不能少于3个字符',
                                max:'用户名不能多于15个字符'
                            }
                        },
                        //密码配置
                        {
                            type:'input',
                            modelKey:'password',
                            label:'密码',
                            props:{
                                placeholder:'请输入密码',
                                type:'password', 
                                eye:{
                                    open:false,
                                }
                            },
                            rules:{
                                required:true,
                            },
                            trigger:'blur'                          
                        },
                        //提交密码
                        {
                            type:'submit',
                            label:'登录'
                        }
                    ]
                }
            }
        },
        methods:{
            async submitHandler(e){
                e.preventDefault()
                try{
                    const result=await this.$http.get('/api/login',{params:this.model})
                    //console.log(result.data.token)
                    if(result.code=='0'){
                        //alert(result.data.message)
                        this.$store.commit('settoken',result.token)
                        window.localStorage.setItem('taken',result.token)
                        this.$router.replace({path:'/index'})//登录成功跳转到首页
                    }else{
                        alert(result.message)
                    }
                }catch(err){
                    console.log(err)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.topimg{
    width: 100%;
    height: 150px;
}
</style>